<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" label-width="100px" inline>
      <el-form-item label="店铺名称">
        <el-input v-model="queryParams.cusName" clearable placeholder="请输入店铺名称"></el-input>
      </el-form-item>
      <el-form-item label="合同到期日">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 280px"></el-date-picker>
      </el-form-item>
      <el-form-item label="录入人">
        <el-input v-model.trim="queryParams.createName" placeholder="请输入录入人名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" size="small" icon="el-icon-download" @click="handleExport">导出</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="dataList" ref="agreementTable" border>
      <el-table-column type="index" width="55" align="center"/>
      <el-table-column label="店铺名称" header-align="center" align="left" prop="cusName" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="签约类型" header-align="center" align="center" width="120" prop="type" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.type=='1'">新签</el-tag>
          <el-tag v-if="scope.row.type=='2'">续费</el-tag>
          <el-tag type="success" v-if="scope.row.type=='3'">断约新签</el-tag>
          <el-tag type="warning" v-if="scope.row.type=='4'">转介绍</el-tag>
          <el-tag type="danger" v-if="scope.row.type=='5'">同客户不同店铺</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="服务类型" header-align="center" align="center" prop="fwlx" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.fwlx=='1'">整店项目</el-tag>
          <el-tag type="success" v-if="scope.row.fwlx=='2'">单车项目</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="到账金额（元）" width="130" header-align="center" align="right" prop="money" :formatter="formatMoney" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="开始日期" header-align="center" align="center" width="150" prop="startDate" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="结束日期" header-align="center" align="center" width="150" prop="endDate" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="合同状态" header-align="center" align="center" width="100" prop="status" :formatter="htztFormat" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.status=='0'">未审核</el-tag>
          <el-tag type="success" v-if="scope.row.status=='1'">已审核</el-tag>
          <el-tag type="danger" v-if="scope.row.status=='2'">已到期</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="录入人" header-align="center" align="center" width="120" prop="createName" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="录入时间" header-align="center" align="center" prop="createTime" :show-overflow-tooltip="true"></el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {exportMaxEndDateAgreement, selectMaxEndDateAgreementList} from "@/api/agreement/agreement";
import {exportCustom} from "@/api/custom/custom";

export default {
  name: "ReportAgreement",
  data() {
    return {
      queryParams: {
        cusName: '',
        endDate1: undefined,
        endDate2: undefined,
        createName: '',
        pageSize: 10,
        pageNum: 1
      },
      dateRange: [],
      loading: false,
      dataList: [],
      total: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    getList() {
      if (this.dateRange !== null && this.dateRange.length === 2) {
        this.queryParams.endDate1 = this.dateRange[0]
        this.queryParams.endDate2 = this.dateRange[1]
      }
      selectMaxEndDateAgreementList(this.queryParams).then(response => {
        this.dataList = response.rows
        this.total = response.total
      })
    },
    handleExport(){
      if(this.dateRange !== null && this.dateRange.length === 2){
        this.queryParams.endDate1 = this.dateRange[0]
        this.queryParams.endDate2 = this.dateRange[1]
      }
      exportMaxEndDateAgreement(this.queryParams).then(response=>{
        console.log('返回信息：' + JSON.stringify(response))
        this.download(response.msg);
      })

    },
    formatMoney(row) {
      if (row.money === undefined || row.money === '' || row.money === null) {
        return '0.00'
      } else {
        return row.money.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
      }
    },
    // 格式化合同状态
    htztFormat(row) {
      return this.selectDictLabel(this.htztOptions, row.status);
    }
  }
}
</script>

<style scoped lang="scss">

</style>
